<template>
	<!-- 面试题页面 -->
	<view class="container">
		<view class="text">
			<text>微保祝您每天上班平平安安</text>
		</view>
		<view class="top">
			<view class="top-left">
				<image src="https://img.zcool.cn/community/010eb157eb5c21a84a0e282b8d6acd.jpg@1280w_1l_2o_100sh.jpg">
				</image>
			</view>
			<view class="top-center">
				上海环球金融中心项目<br>
				<text style="color: blue;">● </text>
				项目创建者: 陈达<br>
				<text style="color: green;">● </text>
				项目状态: 在建<br>
				<text style="color: red;">● </text>
				类别: 房屋建筑工程<br>
				<text style="color: brown;">● </text>
				开工日期: 2020年11月5日<br>
			</view>
			<view class="top-right">
				<button>切换项目</button>
			</view>
		</view>
		<view class="center">
			<view class="">
				建设局通知，月底将开展全市农民工大检查，请各用工单位做好准备工作
			</view>
			<view>
				<button>查看</button>
			</view>
		</view>
		<view class="footer">
			<!-- 第一行 -->
			<view style="display: flex;margin: 20rpx 40rpx;align-items: center;justify-content: space-between;">
				<view class="">
					<view
						style="height: 100rpx;width: 100rpx;background-color: #50be73;border-radius: 20rpx;font-size: 25rpx;">
						<uni-icons color='#fff' type="location-filled" size="50"></uni-icons>
					</view>
					<view style="text-align: center;">
						<text style="font-size: 25rpx;">个人中心</text>
					</view>
				</view>
				<view class="">
					<view
						style="height: 100rpx;width: 100rpx;background-color: #fc965f;border-radius: 20rpx;font-size: 25rpx;">
						<uni-icons color='#fff' type="chatboxes" size="50"></uni-icons>
					</view>
					<view style="text-align: center;">
						<text style="font-size: 25rpx;">收入管理</text>
					</view>
				</view>
				<view class="">
					<view
						style="height: 100rpx;width: 100rpx;background-color: #50be73;border-radius: 20rpx;font-size: 25rpx;">
						<uni-icons color='#fff' type="location-filled" size="50"></uni-icons>
					</view>
					<view style="text-align: center;">
						<text style="font-size: 25rpx;">个人中心</text>
					</view>
				</view>
				<view class="">
					<view
						style="height: 100rpx;width: 100rpx;background-color: #fc965f;border-radius: 20rpx;font-size: 25rpx;">
						<uni-icons color='#fff' type="chatboxes" size="50"></uni-icons>
					</view>
					<view style="text-align: center;">
						<text style="font-size: 25rpx;">收入管理</text>
					</view>
				</view>
			</view>
			<!-- 第二行 -->
			<view style="display: flex;margin: 20rpx 40rpx;align-items: center;justify-content: space-between;">
				<view class="">
					<view
						style="height: 100rpx;width: 100rpx;background-color: #50be73;border-radius: 20rpx;font-size: 25rpx;">
						<uni-icons color='#fff' type="location-filled" size="50"></uni-icons>
					</view>
					<view style="text-align: center;">
						<text style="font-size: 25rpx;">个人中心</text>
					</view>
				</view>
				<view class="">
					<view
						style="height: 100rpx;width: 100rpx;background-color: #fc965f;border-radius: 20rpx;font-size: 25rpx;">
						<uni-icons color='#fff' type="chatboxes" size="50"></uni-icons>
					</view>
					<view style="text-align: center;">
						<text style="font-size: 25rpx;">收入管理</text>
					</view>
				</view>
				<view class="">
					<view
						style="height: 100rpx;width: 100rpx;background-color: #50be73;border-radius: 20rpx;font-size: 25rpx;">
						<uni-icons color='#fff' type="location-filled" size="50"></uni-icons>
					</view>
					<view style="text-align: center;">
						<text style="font-size: 25rpx;">个人中心</text>
					</view>
				</view>
				<view class="">
					<view
						style="height: 100rpx;width: 100rpx;background-color: #fc965f;border-radius: 20rpx;font-size: 25rpx;">
						<uni-icons color='#fff' type="chatboxes" size="50"></uni-icons>
					</view>
					<view style="text-align: center;">
						<text style="font-size: 25rpx;">收入管理</text>
					</view>
				</view>
			</view>
			<!-- 第三行 -->
			<view
				style="display: flex;margin: 20rpx 40rpx;align-items: center;justify-content: space-between;width: 39%;">
				<view class="">
					<view
						style="height: 100rpx;width: 100rpx;background-color: #50be73;border-radius: 20rpx;font-size: 25rpx;">
						<uni-icons color='#fff' type="location-filled" size="50"></uni-icons>
					</view>
					<view style="text-align: center;">
						<text style="font-size: 25rpx;">个人中心</text>
					</view>
				</view>
				<view class="">
					<view
						style="height: 100rpx;width: 100rpx;background-color: #fc965f;border-radius: 20rpx;font-size: 25rpx;">
						<uni-icons color='#fff' type="chatboxes" size="50"></uni-icons>
					</view>
					<view style="text-align: center;">
						<text style="font-size: 25rpx;">收入管理</text>
					</view>
				</view>
			</view>
			<!-- 第四行 -->
			<view
				style="display: flex;margin: 20rpx 40rpx;align-items: center;justify-content: space-between;width: 64%;">
				<view class="">
					<view
						style="height: 100rpx;width: 100rpx;background-color: #50be73;border-radius: 20rpx;font-size: 25rpx;">
						<uni-icons color='#fff' type="location-filled" size="50"></uni-icons>
					</view>
					<view style="text-align: center;">
						<text style="font-size: 25rpx;">个人中心</text>
					</view>
				</view>
				<view class="">
					<view
						style="height: 100rpx;width: 100rpx;background-color: #fc965f;border-radius: 20rpx;font-size: 25rpx;">
						<uni-icons color='#fff' type="chatboxes" size="50"></uni-icons>
					</view>
					<view style="text-align: center;">
						<text style="font-size: 25rpx;">收入管理</text>
					</view>
				</view>
				<view class="">
					<view
						style="height: 100rpx;width: 100rpx;background-color: #50be73;border-radius: 20rpx;font-size: 25rpx;">
						<uni-icons color='#fff' type="location-filled" size="50"></uni-icons>
					</view>
					<view style="text-align: center;">
						<text style="font-size: 25rpx;">个人中心</text>
					</view>
				</view>
			</view>
			<view style="text-align: center">
				<!-- <navigator>华工数据技术支持</navigator> -->
				<uni-link color="#00a7f0" href="www.baidu.com">华工数据技术支持</uni-link>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.container {
		width: 100%;
		height: 100vh;
		background-color: #00a7f0;
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.text {
		width: 90%;
		text-align: right;
		color: #fff;
		font-size: 25rpx;
		padding-bottom: 10rpx;
	}

	.top {
		height: 15%;
		width: 95%;
		background-color: #fff;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		// justify-content: space-between;
		padding: 0 20rpx;
		box-sizing: border-box;

		.top-left {
			height: 90%;
			width: 20%;
			// background-color: red;

			image {
				height: 100%;
				width: 100%;
			}
		}

		.top-center {
			height: 90%;
			width: 70%;
			// background-color: red;
			margin-left: 20rpx;
			font-size: 25rpx;
			padding-left: 60rpx;
		}

		.top-right {
			height: 90%;
			width: 20%;
			// background-color: red;

			button {
				height: 100%;
				width: 65%;
				font-size: 25rpx;
				background-color: #4f98ef;
				color: #fff;
				line-height: 40rpx;
				text-align: center;
				margin-right: 0;
			}
		}
	}

	.center {
		height: 10%;
		width: 95%;
		background-color: #fff;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		font-size: 30rpx;

		button {
			background-color: #00a7f0;
			height: 35rpx;
			width: 100rpx;
			border-radius: 10rpx;
			font-size: 22rpx;
			color: #fff;
			line-height: 35rpx;
			text-align: center;
			margin-right: 0;
		}
	}

	.footer {
		height: 65%;
		width: 95%;
		background-color: #fff;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
	}
</style>
